<template>
  <div ref="appWidth" style="position: relative;display: flex;flex-direction: column;align-items: center">
    <img src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/portal/introduce/banner.png" style="width: 100%;height: 100%;display: block">
    <div class="introduction_card_box"  style="position: relative;display: flex;flex-direction: column;justify-content: center;align-items: center"
         :style="{top: boxTop}">
      <div>
        <div class="introduction_card" ref="cardHeight">
          <h3 style="text-align: center">关于我们</h3>
          <span class="introduction_card_content">
            <p>厦⻔睿商⽹络科技有限公司是一家正在蓬勃发展的新兴高新科技企业，立于互联网+时代潮
头，借助大数据、云计算、物联网等信息技术，提供各行各业实体商业互联网+新零售运营技术
解决方案。</p>
           <p>公司拥有全国领先的互联网技术、移动互联网技术及 相关信息化应用技术，已在厦⻔、合肥、
南京等地设立多个技术研发中⼼，以自主研发的芸系列产品为核⼼，赋能⼴⼤实体商业与
整合资源，输出技术与模式，助力实体经济转型 发展。</p>
            <p>目前， 睿商科技已构建了技术咨询、平台建设、运营服务等三⼤业务体系，涉及商超百货、
生鲜、饮用水、鲜奶、餐饮...等多个⾏业。</p>
          </span>
        </div>
      </div>
<!--      <div class="introduction_video_box">-->
<!--        &lt;!&ndash;        <video controls="controls" id="video" class="introduction_video" src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/portal/introduce/video.mp4"></video>&ndash;&gt;-->
<!--        <img  controls="controls" id="video" class="introduction_video"  src="  http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/portal/introduce/rzico.jpeg">-->
<!--      </div>-->
      <div class="introduction_Title">
        <img src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/portal/introduce/in.png" style="width: 100%">
<!--        <span class="introduction_Title_left">一、我们的使命:-->
<!--          <p class="introduction_Title_right">以先进技术为驱动实现商业关系更快速、更广泛、更便捷的连接!用技术联结和赋能实体商业，睿-商-科-技！</p></span>-->
<!--        <span class="introduction_Title_left">二、发展历程：-->
<!--          <p class="introduction_Title_right">2013年：南京&#45;&#45;&gt2015年：合肥&#45;&#45;&gt2017年至今：厦门</p></span>-->
<!--        <span class="introduction_Title_left">三、核经营理念：<br>-->
<!--          <p class="introduction_Title_right" style="padding: 0px; margin:0px;">连接&#45;&#45;&gt工具&#45;&#45;&gt生态 </p>-->
<!--          <span class="introduction_Title_right">-->
<!--            <p class="introduction_Title_right">睿商科技自主研发的<span style="color: red">芸系列产品</span>经过近十年的技术沉淀， 已广泛应用到日常生活的方方面面，涵盖民生政务、生活消费 当中的吃、住、行、游、购等各行各业。</p>-->
<!--          <span style="margin-bottom: 0; font-weight: bold " class="introduction_Title_right">&nbsp; &nbsp; &nbsp; 1、主要实现三大功能:</span><br>-->
<!--            <span style="color: red;">&nbsp; &nbsp; &nbsp; 一是做联接：成为各行各业的联结器；</span><br>-->
<!--            <span style="color: red;">&nbsp; &nbsp; &nbsp; 二是做工具：为各行各业提供最完美的互联网工具箱；</span><br>-->
<!--            <span style="color: red;">&nbsp; &nbsp; &nbsp; 三是做生态：运用开放协作的理念，共建实体商业生态共同体！</span>-->
<!--          </span>-->
<!--        </span>-->
<!--        <span class="introduction_Title_left">四、核心产品：-->
<!--          <p class="introduction_Title_right" style="margin-bottom:0 ">订单系统&#45;&#45;配送系统&#45;&#45;监管系统&#45;&#45;结算系统&#45;&#45;大数据应用</p>-->
<!--        <div><p class="introduction_Title_right" style="font-weight:bold ">1、订单系统:</p>-->
<!--          <p class="introduction_Title_right">即购物⻋系统，实现⽤户注册、产品展示、在线定购、在线⽀付等电⼦商务 订单系统 功能；⽤户联结企业的重要⻔户，从认识⾄认知构建超级 VIP 的重要⼯具</p></div>-->
<!--        <div><p class="introduction_Title_right" style="font-weight:bold ">2、配送系统:</p>-->
<!--          <p class="introduction_Title_right">全程智能物流管理，基于位置信息实现端到端⾼效运输，就近配送，降本增效，完成 订单配载,路由追踪,自动结算,⻋辆定位追踪.⼈员调度等,实现实时订单追踪和管理</p></div>-->
<!--        <div><p  class="introduction_Title_right"style="font-weight:bold ">3、监管系统:</p>-->
<!--          <p class="introduction_Title_right">现代敏感性物流监控系统必须撑握货物实时信息，监控其货物流和资⾦流，提供给务 人员，销售⼈员和客户，保障其⾼效运作。主要包含资⾦安全，订单异常，预约提醒， 位置监控，库存安全等</p></div>-->
<!--        <div><p class="introduction_Title_right" style="font-weight:bold ">4、结算系统:</p>-->
<!--          <p class="introduction_Title_right">企业的⾼效运转，海量订单的流动，资⾦合理利⽤都成为必须解决的问题，平台资自 结算系统 动结算，降低财务成本。主要解决配送站，送货⻋，送货员及第三⽅⽀付全⾃动结算。</p></div>-->
<!--        <div><p class="introduction_Title_right" style="font-weight:bold ">5、大数据应用:</p>-->
<!--          <p class="introduction_Title_right">已经进⼊营销4.0数据时代，多维度挖掘客户⾏为习惯，精准客户画像，为企业营销决 大数据应用 策提供重要依据，如年龄结构，客庭⼈⼝，消费能⼒等…</p></div>-->
<!--        <span class="introduction_Title_left">6、我们的团队：<span class="introduction_Title_right">-->
<!--            <p>一支由电商行业专家、资深软件开发工程师组成 的精英团队，造就了睿商科技的核心竞争力，为技 术研发注入了无限活力，保证了公司研发水平始终 与全球前沿科技保持同步。</p>-->
<!--            <p>从“勇担责任、快速高效、精益求精、专注细节、 实干专业、专一坚韧”的六大作风到“信任、忠诚、 创新、速度、专注”的十字服务之道，我们可以看 到睿商人一直都在努力，锐意创新，研发质量更优 的产品，提供客户更满意的技术支持服务！</p></span>-->
<!--        </span>-->
<!--        </span>-->
<!--        <span class="introduction_Title_left">五、我们的优势：-->
<!--          <span class="introduction_Title_right">-->
<!--          <p>大鹏展翅千万里, 壮志凌云天地间。</p>-->
<!--          <p>“高品质，优服务”，你选择睿商科技的理由。 公司将始终坚持“技术至上 用户为本”的发展战略， 在创新的路上一如既往，相得益彰地传达着公司恒久不变的经营目标与科技理念，并在这种矢志不渝的精神力量推动下，朝着“创名牌、争一流”的理 想彼岸，扬帆远航，奋勇搏击！</p>-->
<!--          <p style="color: red; font-weight: 500;">用技术联结和赋能实体商业，睿-商-科-技！</p></span>-->
<!--        </span>-->
<!--      </div>-->
<!--      &lt;!&ndash;      <div class="introduction_Members">&ndash;&gt;-->
<!--      &lt;!&ndash;        <span class="introduction_Members_title">核心团队成员</span>&ndash;&gt;-->
<!--      &lt;!&ndash;        <div class="introduction_Members_itemBox">&ndash;&gt;-->
<!--      &lt;!&ndash;          <div class="introduction_Members_item">&ndash;&gt;-->
<!--      &lt;!&ndash;            <el-image class="introduction_Members_item_img"></el-image>&ndash;&gt;-->
<!--      &lt;!&ndash;            <span class="introduction_Members_item_name">黄美请</span>&ndash;&gt;-->
<!--      &lt;!&ndash;            <span class="introduction_Members_item_subtitle">CEO</span>&ndash;&gt;-->
<!--      &lt;!&ndash;          </div>&ndash;&gt;-->
<!--      &lt;!&ndash;          <div class="introduction_Members_item">&ndash;&gt;-->
<!--      &lt;!&ndash;            <el-image class="introduction_Members_item_img"></el-image>&ndash;&gt;-->
<!--      &lt;!&ndash;            <span class="introduction_Members_item_name">张森荣</span>&ndash;&gt;-->
<!--      &lt;!&ndash;            <span class="introduction_Members_item_subtitle">总经理</span>&ndash;&gt;-->
<!--      &lt;!&ndash;            <span class="introduction_Members_item_subtitle">Java高级工程师</span>&ndash;&gt;-->
<!--      &lt;!&ndash;          </div>&ndash;&gt;-->
<!--      &lt;!&ndash;          <div class="introduction_Members_item">&ndash;&gt;-->
<!--      &lt;!&ndash;            <el-image class="introduction_Members_item_img"></el-image>&ndash;&gt;-->
<!--      &lt;!&ndash;            <span class="introduction_Members_item_name">廖志文</span>&ndash;&gt;-->
<!--      &lt;!&ndash;            <span class="introduction_Members_item_subtitle">Java工程师</span>&ndash;&gt;-->
<!--      &lt;!&ndash;          </div>&ndash;&gt;-->
<!--      &lt;!&ndash;          <div class="introduction_Members_item">&ndash;&gt;-->
<!--      &lt;!&ndash;            <el-image class="introduction_Members_item_img"></el-image>&ndash;&gt;-->
<!--      &lt;!&ndash;            <span class="introduction_Members_item_name">龚泽良</span>&ndash;&gt;-->
<!--      &lt;!&ndash;            <span class="introduction_Members_item_subtitle">web工程师</span>&ndash;&gt;-->
<!--      &lt;!&ndash;          </div>&ndash;&gt;-->
<!--      &lt;!&ndash;          <div class="introduction_Members_item">&ndash;&gt;-->
<!--      &lt;!&ndash;            <el-image class="introduction_Members_item_img"></el-image>&ndash;&gt;-->
<!--      &lt;!&ndash;            <span class="introduction_Members_item_name">吴伟聪</span>&ndash;&gt;-->
<!--      &lt;!&ndash;            <span class="introduction_Members_item_subtitle">web工程师</span>&ndash;&gt;-->
<!--      &lt;!&ndash;          </div>&ndash;&gt;-->
<!--      &lt;!&ndash;          <div class="introduction_Members_item">&ndash;&gt;-->
<!--      &lt;!&ndash;            <el-image class="introduction_Members_item_img"></el-image>&ndash;&gt;-->
<!--      &lt;!&ndash;            <span class="introduction_Members_item_name">刘斌</span>&ndash;&gt;-->
<!--      &lt;!&ndash;            <span class="introduction_Members_item_subtitle">软件测试</span>&ndash;&gt;-->
<!--      &lt;!&ndash;          </div>&ndash;&gt;-->
<!--      &lt;!&ndash;        </div>&ndash;&gt;-->
<!--    </div>-->
<!--    &lt;!&ndash;      <div class="introduction_Members">&ndash;&gt;-->
<!--    &lt;!&ndash;        <span class="introduction_Members_title">大事记</span>&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="introduction_catalogue">&ndash;&gt;-->
<!--    &lt;!&ndash;          <div class="introduction_catalogue_box">&ndash;&gt;-->
<!--    &lt;!&ndash;            <span class="introduction_catalogue_headerTitle">2013年：南京</span>&ndash;&gt;-->
<!--    &lt;!&ndash;            <div class="introduction_catalogue_headerLine"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;            <span class="introduction_catalogue_title">&ndash;&gt;-->
<!--    &lt;!&ndash;              以先进技术为驱动实现 商业关系更快速、更广 泛、更便捷的连接用技 术联结和赋能实体商业&ndash;&gt;-->
<!--    &lt;!&ndash;            </span>&ndash;&gt;-->
<!--    &lt;!&ndash;          </div>&ndash;&gt;-->
<!--    &lt;!&ndash;          <div class="introduction_catalogue_box">&ndash;&gt;-->
<!--    &lt;!&ndash;            <span class="introduction_catalogue_headerTitle">2013年：南京</span>&ndash;&gt;-->
<!--    &lt;!&ndash;            <div class="introduction_catalogue_headerLine"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;            <span class="introduction_catalogue_title">&ndash;&gt;-->
<!--    &lt;!&ndash;              以先进技术为驱动实现 商业关系更快速、更广 泛、更便捷的连接用技 术联结和赋能实体商业&ndash;&gt;-->
<!--    &lt;!&ndash;            </span>&ndash;&gt;-->
<!--    &lt;!&ndash;          </div>&ndash;&gt;-->
<!--    &lt;!&ndash;          <div class="introduction_catalogue_box">&ndash;&gt;-->
<!--    &lt;!&ndash;            <span class="introduction_catalogue_headerTitle">2013年：南京</span>&ndash;&gt;-->
<!--    &lt;!&ndash;            <div class="introduction_catalogue_headerLine"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;            <span class="introduction_catalogue_title">&ndash;&gt;-->
<!--    &lt;!&ndash;              以先进技术为驱动实现 商业关系更快速、更广 泛、更便捷的连接用技 术联结和赋能实体商业&ndash;&gt;-->
<!--    &lt;!&ndash;            </span>&ndash;&gt;-->
<!--    &lt;!&ndash;          </div>&ndash;&gt;-->
<!--    &lt;!&ndash;          <div class="introduction_catalogue_box">&ndash;&gt;-->
<!--    &lt;!&ndash;            <span class="introduction_catalogue_headerTitle">2013年：南京</span>&ndash;&gt;-->
<!--    &lt;!&ndash;            <div class="introduction_catalogue_headerLine"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;            <span class="introduction_catalogue_title">&ndash;&gt;-->
<!--    &lt;!&ndash;              以先进技术为驱动实现 商业关系更快速、更广 泛、更便捷的连接用技 术联结和赋能实体商业&ndash;&gt;-->
<!--    &lt;!&ndash;            </span>&ndash;&gt;-->
<!--    &lt;!&ndash;          </div>&ndash;&gt;-->
<!--    &lt;!&ndash;        </div>&ndash;&gt;-->
<!--    &lt;!&ndash;      </div>&ndash;&gt;-->
<!--    <span class="introduction_bottom_title">芸助手•用技术联结和重构实体产业</span>-->
  </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      boxTop: 0
    }
  },
  mounted() {
    var appWidth = this.$refs.appWidth.clientWidth
    if (appWidth > 0 && appWidth < 319) {
      this.boxTop = '-20px'
    } else if (appWidth > 320 && appWidth < 569) {
      this.boxTop = '-30px'
    } else if (appWidth > 570 && appWidth < 749) {
      this.boxTop = '-50px'
    } else if (appWidth > 750 && appWidth < 929) {
      this.boxTop = '-' + (this.$refs.cardHeight.clientHeight / 3) + 'px'
    } else if (appWidth > 930) {
      this.boxTop = '-' + (this.$refs.cardHeight.clientHeight / 2) + 'px'
    }
    window.onresize = () => {
      return (() => {
        var appWidth = this.$refs.appWidth.clientWidth
        if (appWidth > 0 && appWidth < 319) {
          this.boxTop = '-20px'
        } else if (appWidth > 320 && appWidth < 569) {
          this.boxTop = '-30px'
        } else if (appWidth > 570 && appWidth < 749) {
          this.boxTop = '-50px'
        } else if (appWidth > 750 && appWidth < 929) {
          this.boxTop = '-' + (this.$refs.cardHeight.clientHeight / 3) + 'px'
        } else if (appWidth > 930) {
          this.boxTop = '-' + (this.$refs.cardHeight.clientHeight / 2) + 'px'
        }
      })()
    }
  }
}
</script>

<style scoped>
.introduction_Members_title{
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #4D4D4D;
}
.introduction_Members_item_img{
  width: 140px;
  height: 160px;
}
.introduction_Members_item_name{
  font-size: 14px;
  font-weight: bold;
  display: block;
  margin-top: 2px;
  text-align: center;
}
.introduction_Members_item_subtitle{
  font-size: 14px;
  margin-top: 2px;
  display: block;
  text-align: center;
}
@media screen and (min-width: 0px) and (max-width: 320px) {
  .indexImg {
    background: radial-gradient(black, transparent);
    display: block;
    z-index: -1;
  }

  .introduction_card_box{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
  }

  .introduction_card {
    width: 80vw;
    box-shadow: 0px 0px 27px 0px rgba(98, 98, 98, 0.75);
    z-index: 1;
    background-color: white;
    padding: 20px;
  }

  .introduction_card_content {
    font-size: 12px;
    line-height: 17px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #686868;
    text-align: justify;
    text-indent: 2em;
  }

  .introduction_video_box{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .introduction_video {
    width: 80vw;
    height: 50vw;
    background: radial-gradient(black, transparent);
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .introduction_Title {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 30px;
    margin-top: 30px;

    /*box-shadow: 0px 0px 27px 0px rgba(98, 98, 98, 0.75);*/

  }
  .introduction_Title_left {
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #4D4D4D;
    line-height: 1.5;
    margin-bottom: 4px;
  }

  .introduction_Title_right {
    font-size: 12px;
    font-family: Microsoft YaHei;
    color: #4D4D4D;
    line-height: 1.5;
    font-weight: normal;
    text-indent: 1.5em;
    text-align: justify;
  }
  .introduction_Members{
    width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
  }
  .introduction_Members_itemBox{
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
  }
  .introduction_Members_title{
    font-size: 19px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #4D4D4D;
  }
  .introduction_bottom_title{
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #535353;
    margin-top: 15px;
    margin-bottom: 40px;
  }
  .introduction_catalogue{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  .introduction_catalogue_box{
    width: 166px;
    /*height: 134px;*/
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 20px;
  }
  .introduction_catalogue_headerTitle{
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #4D4D4D;
    line-height: 24px;
  }
  .introduction_catalogue_headerLine{
    width: 50px;
    height: 2px;
    background-color: aqua;
    margin-top: 4px;
  }
  .introduction_catalogue_title{
    font-size: 16px;
    font-family: Microsoft YaHei;
    color: #4D4D4D;
    line-height: 24px;
    padding-top: 10px;
  }
}
@media screen and (min-width: 321px) and (max-width: 750px) {
  .indexImg {
    background: radial-gradient(black, transparent);
    display: block;
    z-index: -1;
  }

  .introduction_card_box{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
  }
  .introduction_card {
    width: 80vw;
    box-shadow: 0px 0px 27px 0px rgba(98, 98, 98, 0.75);
    z-index: 1;
    background-color: white;
    padding: 20px 30px;
  }

  .introduction_card_content {
    font-size: 13px;
    line-height: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #686868;
    text-align: justify;
    text-indent: 2em;
  }

  .introduction_video {
    width: 80vw;
    height: 50vw;
    background: radial-gradient(black, transparent);
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .introduction_Title {
    display: flex;
    flex-direction: column;
    width: 75vw;
    padding-bottom: 30px;
    margin-top: 30px;
    /*box-shadow: 0px 0px 27px 0px rgba(98, 98, 98, 0.75);*/

  }
  .introduction_Title_left {
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #4D4D4D;
    line-height: 1.5;
    margin-bottom: 4px;
  }

  .introduction_Title_right {
    font-size: 12px;
    font-family: Microsoft YaHei;
    color: #4D4D4D;
    line-height: 1.5;
    font-weight: normal;
    text-indent: 1.5em;
    text-align: justify;
  }
  .introduction_Members{
    width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
  }
  .introduction_Members_itemBox{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .introduction_Members_item{
    width: 140px;
    /*height: 210px;*/
    background-color: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    padding-bottom: 10px;
  }
  .introduction_bottom_title{
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #535353;
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .introduction_catalogue{
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  .introduction_catalogue_box{
    width: 166px;
    /*height: 134px;*/
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 20px;
  }
  .introduction_catalogue_headerTitle{
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #4D4D4D;
    line-height: 24px;
  }
  .introduction_catalogue_headerLine{
    width: 50px;
    height: 2px;
    background-color: aqua;
    margin-top: 4px;
  }
  .introduction_catalogue_title{
    font-size: 16px;
    font-family: Microsoft YaHei;
    color: #4D4D4D;
    line-height: 24px;
    padding-top: 10px;
  }
}
@media screen and (min-width: 751px) and (max-width: 769px) {
  .indexImg {
    background: radial-gradient(black, transparent);
    display: block;
    z-index: -1;
  }
  .introduction_card_box{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
  }

  .introduction_card {
    width: 85vw;
    box-shadow: 0px 0px 27px 0px rgba(98, 98, 98, 0.75);
    z-index: 1;
    background-color: white;
    padding: 20px 30px;
  }

  .introduction_card_content {
    font-size: 14px;
    line-height: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #686868;
    text-align: justify;
    text-indent: 2em;
  }

  .introduction_video {
    width: 80vw;
    height: 50vw;
    background: radial-gradient(black, transparent);
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .introduction_Title {
    display: flex;
    flex-direction: column;
    width: 80vw;
    padding-bottom: 30px;
    margin-top: 30px;
    /*box-shadow: 0px 0px 27px 0px rgba(98, 98, 98, 0.75);*/

  }
  .introduction_Title_left {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #4D4D4D;
    line-height: 1.5;
    margin-bottom: 4px;
  }

  .introduction_Title_right {
    font-size: 14px;
    font-family: Microsoft YaHei;
    color: #4D4D4D;
    line-height: 1.5;
    font-weight: normal;
    text-indent: 2em;
    text-align: justify;

  }
  .introduction_Members{
    width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
  }
  .introduction_Members_itemBox{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .introduction_Members_item{
    width: 140px;
    /*height: 210px;*/
    background-color: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 30px;
    padding-bottom: 10px;
  }
  .introduction_bottom_title{
    font-size: 25px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #535353;
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .introduction_catalogue{
    width: 85%;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  .introduction_catalogue_box{
    width: 166px;
    /*height: 134px;*/
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 20px;
  }
  .introduction_catalogue_headerTitle{
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #4D4D4D;
    line-height: 24px;
  }
  .introduction_catalogue_headerLine{
    width: 50px;
    height: 2px;
    background-color: aqua;
    margin-top: 4px;
  }
  .introduction_catalogue_title{
    font-size: 16px;
    font-family: Microsoft YaHei;
    color: #4D4D4D;
    line-height: 24px;
    padding-top: 10px;
  }
}
@media screen and (min-width: 770px) and (max-width: 1199px) {
  .indexImg {
    background: radial-gradient(black, transparent);
    display: block;
    z-index: -1;
  }
  .introduction_card_box{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
  }

  .introduction_card {
    width: 85vw;
    box-shadow: 0px 0px 27px 0px rgba(98, 98, 98, 0.75);
    z-index: 1;
    background-color: white;
    padding: 30px 40px;
  }

  .introduction_card_content {
    font-size: 15px;
    line-height: 25px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #686868;
    text-align: justify;
    text-indent: 2em;
  }

  .introduction_video {
    width: 85vw;
    height: 50vw;
    background: radial-gradient(black, transparent);
    margin-top: 30px;
    margin-bottom: 30px;

  }

  .introduction_Title {
    display: flex;
    flex-direction: column;
    width: 80vw;
    padding-bottom: 40px;
    margin-top: 40px;
    /*box-shadow: 0px 0px 27px 0px rgba(98, 98, 98, 0.75);*/
  }
  .introduction_Title_left {
    font-size: 17px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #4D4D4D;
    line-height: 1.5;
    margin-bottom: 4px;
  }

  .introduction_Title_right {
    font-size: 15px;
    font-family: Microsoft YaHei;
    color: #4D4D4D;
    line-height: 1.5;
    font-weight: normal;
    text-indent: 2em;
    text-align: justify;
  }
  .introduction_Members{
    width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
  }
  .introduction_Members_itemBox{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .introduction_Members_item{
    width: 140px;
    /*height: 210px;*/
    background-color: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 30px;
    padding-bottom: 10px;
  }
  .introduction_bottom_title{
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #535353;
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .introduction_catalogue{
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  .introduction_catalogue_box{
    width: 166px;
    /*height: 134px;*/
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 20px;
  }
  .introduction_catalogue_headerTitle{
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #4D4D4D;
    line-height: 24px;
  }
  .introduction_catalogue_headerLine{
    width: 50px;
    height: 2px;
    background-color: aqua;
    margin-top: 4px;
  }
  .introduction_catalogue_title{
    font-size: 16px;
    font-family: Microsoft YaHei;
    color: #4D4D4D;
    line-height: 24px;
    padding-top: 10px;
  }
}
@media (min-width: 1200px) {
  .introduction_card_box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1200px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .introduction_card {
    width: 1200px;
    box-shadow: 0px 0px 27px 0px rgba(98, 98, 98, 0.75);
    z-index: 1;
    background-color: white;
    padding: 40px;
    line-height: 1.5;
  }

  .introduction_card_content {
    font-size: 16px;
    line-height: 25px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #686868;
    text-align: justify;
    text-indent: 2em;
  }
  .introduction_video_box{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .introduction_video {
    width: 60vw;
    background: radial-gradient(black, transparent);
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .introduction_Title {
    display: flex;
    flex-direction: column;
    width: 1100px;
    margin-top: 70px;
    padding-bottom: 70px;
    /*box-shadow: 0px 0px 27px 0px rgba(98, 98, 98, 0.75);*/
  }
  .introduction_Title_left {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #4D4D4D;
    line-height: 1.5;
    margin-bottom: 4px;
  }

  .introduction_Title_right {
    font-size: 17px;
    font-family: Microsoft YaHei;
    color: #4D4D4D;
    line-height: 1.5;
    font-weight: 400;
    text-indent: 2em;
  }
  .introduction_Members{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
  }
  .introduction_Members_itemBox{
    width: 1200px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
  }
  .introduction_Members_item {
    width: 140px;
    /*height: 210px;*/
    background-color: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    padding-bottom: 10px;
  }
  .introduction_bottom_title{
    font-size: 31px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #535353;
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .introduction_catalogue{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 10px;
  }
  .introduction_catalogue_box{
    width: 166px;
    /*height: 134px;*/
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 20px;
  }
  .introduction_catalogue_headerTitle{
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #4D4D4D;
    line-height: 24px;
  }
  .introduction_catalogue_headerLine{
    width: 50px;
    height: 2px;
    background-color: aqua;
    margin-top: 4px;
  }
  .introduction_catalogue_title{
    font-size: 16px;
    font-family: Microsoft YaHei;
    color: #4D4D4D;
    line-height: 24px;
    padding-top: 10px;
  }
}
</style>
